<template>
  <div>
    <h1>{{msg}}</h1>
    <h1>学生姓名：{{name}}</h1>
    <h1>学生性别：{{sex}}</h1>
    <!-- <h1>学生年龄：{{age+1}}</h1> -->
    <h1>学生年龄：{{myAge+1}}</h1>

    <button @click="updateAge">点击修改年龄</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data(){
        return{
            msg:'我是一个尚硅谷的学生',
            // name:'张三',
            // sex:'男',
            // age:18
            myAge:this.age
        }
    },
    methods:{
        updateAge(){
            // props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
            this.myAge = 99            
        }
    },
    //简单接收
    // props:['name','sex','age']

    // 接受的同时限制类型
    // props:{
    //     name:String,
    //     age:Number,
    //     sex:String
    // }

    // 接收的同时 对数据进行限制类型、是否必传、默认值的配置
    props:{
        name:{
            type:String,//类型
            required:true,//是否必须传递

        },
        sex:{
            type:String,
            default:'男',//默认值
        },
        age:{
            type:Number,
            default:99,
        }
    }

}
</script>

<style>

</style>